<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="/js/echarts.common.min.js"></script>
		<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="/js/vue.js"></script>
		<style type = "text/css">
			.select{
				margin-top:0px;
				outline:none;
				border:1px solid #BBBBBB;
				border-radius:4px;
				position:relative;
				width:70px;
				display: inline-block;
			}
			.text{
				height:25px;
				text-align: center;
				-webkit-appearance:none;
				appearance:none;
				border:none;
				font-size:15px;
				padding:0px 10px;
				display:block;
				width:100%;
				-webkit-box-sizing:border-box;
				box-sizing:border-box;
				background-color:#FFFFFF;
				color:#333333;
				border-radius:4px;
			}
		</style>
	</head>
	<body>
	<div class="select">
		<select class="text" name="myselect" id="myselect">
			<option value="年龄">年龄</option>
			<option value="性别">性别</option>
			<option value="学历">学历</option>
		</select>
	</div>
		<div id="main" style="width: 1000px;height: 700px;margin: auto;">



		</div>
		<script>
			var title = '员工年龄分布';
			var name = '年龄';
			var url = "/echarts/queryAge";
			$(function () {
				query(url,title,name);
			});
			$("#myselect").change(function(){
				var opt=$("#myselect").val();

				if (opt === "学历") {
					query("/echarts/queryStu",'员工学历分布','学位');
				}else if (opt === "年龄") {
					query("/echarts/queryAge",'员工年龄分布','年龄');
				} else if(opt === "性别") {
					query("/echarts/querySex",'员工男女比例','性别');
				}
			});
			function query(url,title,name) {
				var app = echarts.init(document.getElementById("main"));
				option = {
					title: {
						text: '员工年龄分布',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},

					series: [
						{
							name: '年龄',
							type: 'pie',
							radius: '50%',
							data: [],
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							},

						}
					]
				};

				$.ajax({
					url: url,
					type:"get",
					dataType:"json",
					success: function (data) {
						console.log(data.data);
						const obj = data.data;

						var arr = [];
						for (var i = 0; i < obj.length; i++) {
							var c = {value: obj[i].value, name: obj[i].name,label: {normal:
											{textStyle: {fontSize: 20}}}};
							arr.push(c);
						}
						option.series[0].data = arr;
						option.title.text = title;
						option.series[0].name = name;
						app.setOption(option);
					},
					error:function (err) {
						alert(JSON.stringify(err));
					}
				})
				app.setOption(option);
			}
		</script>
	</body>
</html>
